﻿@using  EventSys.BussinesEntities
@{
    ViewBag.Title = "RowTemplate";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>RowTemplate</h2>
@(Html.Kendo().Grid<Auspiciador>()
    .Name("grid")
    .HtmlAttributes(new { style = "width: 750px;height:430px;" })
    .Columns(columns =>
    {
        columns.Bound(e => e.idAuspiciador).Width(400).Title("Fecha de Inicio");        
        columns.Bound(e=> e.Direccion).Title("Carrera");
        columns.Bound(e => e.Telefono).Title("ID");
    })
    .ClientRowTemplate(
        "<tr>" +           
            "<td>" +
                "<span class='description'>Fecha de Inicio : #: idAuspiciador#</span>" +
                "<span class='description'>Fecha Fin: #: Direccion# </span>" +
                "<span class='description'>Fecha Fin: #: Telefono# </span>"+
             "</td>"+
             "<td class='employeeID'>"+"#: idEvents#" +
            "</td>"+
        "</tr>"              
    )
     .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("RowTemplate_Read", "Evento"))
        
    )        
    .Scrollable()
)

 <style>           
        .title {
            display: block;
            font-size: 1.6em; 
        }
        .description {
            display: block;
            padding-top: 1.6em;
            font-size:15px;
            color:white;
        }
        .employeeID {
            font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
            font-size: 50px;
            font-weight: bold;
            color: #898989;
        }
        td.photo, .employeeID {
            text-align: center;
        }
        .k-grid-header .k-header {
            padding: 10px 20px;
        }
        .k-grid td {
            background: -moz-linear-gradient(top,  rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
            background: -webkit-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            background: -o-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            background: -ms-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            background: linear-gradient(to bottom,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            padding: 20px;
        }
    </style>
